<template>
	<view class="search-container" :class="themeName">

		<u-sticky offset-top="0" h5-nav-height="0">
			<!-- 搜索 -->
			<view class="search-input">
				<u-search class="flex-1" v-model="search.name" height="72" bg-color="#F4F4F4" :show-action="false"
					placeholder="请输入要搜索的商品" @focus="focusSearch" @search="handleSearch" />
				<view class="search-action" v-if="!searchStatus">
					<view v-show="goodsCardStyle === 'rectangle'" @tap="goodsCardStyle = 'square'">
						<u-icon name="grid" size="38" />
					</view>
					<view v-show="goodsCardStyle === 'square'" @tap="goodsCardStyle = 'rectangle'">
						<u-icon name="list-dot" size="38" />
					</view>
				</view>
				<view v-else class="search-action" @tap="handleSearch(search.name)">
					搜索
				</view>
			</view>
		</u-sticky>

		<!-- 搜索 -->
		<view v-show="searchStatus" class="search-options-container">
			<view class="search-options">
				<view class="search-options-header">
					<text>历史搜索</text>
					<u-icon name="trash" @tap="onSearchHistoryClear" />
				</view>

				<view class="flex row-center">
					<u-loading mode="circle" :show="goodsSearchHistoryLoading" />
				</view>
				<template v-if="!goodsSearchHistoryLoading">
					<view v-if="goodsSearchHistory.length" class="search-options-main">
						<view class="search-options-item" v-for="(item, index) in goodsSearchHistory" :key="index"
							@tap="handleSearch(item)">{{ item }}</view>
					</view>
					<view v-else class="flex row-center muted">暂无记录</view>
				</template>
			</view>

		</view>


		<!-- 搜索结果 -->
		<view v-show="!searchStatus">
			<!-- 排序方式 -->
			<view class="sort">
				<!-- 综合 -->
				<view :class="['sort-item', {'sort-item--active': !search.price && !search.sale}]"
					@tap="handSortOptions('all')">
					<text>综合</text>
				</view>
				<!-- 价格 -->
				<view :class="['sort-item', {'sort-item--active': search.price}]" @tap="handSortOptions('price')">
					<text>价格</text>
					<sort-icon class="m-l-10" :status="search.price" :active-color="themeColor" />
				</view>
				<!-- 销量 -->
				<view :class="['sort-item', {'sort-item--active': search.sale}]" @tap="handSortOptions('sale')">
					<text>销量</text>
					<sort-icon class="m-l-10" :status="search.sale" :active-color="themeColor" />
				</view>
				<!-- 商品卡片样式 -->
				<view :class="['sort-item', {'sort-item--active': search.sale}]" @tap="showScreen = true">
					<text>筛选</text>
				</view>
			</view>

			<!-- 商品列表 -->
			<mescroll-body ref="mescrollRef" :up="{
				  auto: true,
				  noMoreSize: 10,
				  empty: {
				  	icon: '/static/images/empty/shop.png',
				  	tip: '没有找到商品~',
				  	fixed: true
				  }
			  }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view :class="['goods-container', `goods-container-${goodsCardStyle}`]">
					<goods-card v-for="item in goodsList" :key="item.id" :shape="goodsCardStyle" class="goods-item"
						:name="item.name" :image="item.image" :price="item.sell_price" :minPrice="item.lineation_price"
						@click.native="goGoodsDetail(item.id)" />
				</view>
			</mescroll-body>
		</view>
		<u-popup class="screen-popup" v-model="showScreen" mode="right" width="650">
			<view style="height: 100%;" class="flex-col">
				<view class="screen-content">
					<scroll-view style="height: 100%;" scroll-y="true">
						<view class="screen-item">
							<view class="bold">品 牌</view>
							<view class="brand-list flex flex-wrap m-t-30">
								<view class="brand-item m-b-20 line-1" :class="{
									active: item.id == search.brand_id
								}" v-for="(item, index) in brandLists" :key="index" @tap="handleScreen(item)">
									{{ item.name }}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="screen-footer flex-1 flex">
					<button hover-class="none" class="btn btn--reset" size="md" @tap="handleReset">重置</button>
					<button hover-class="none" class="btn btn--confirm" size="md" @tap="handleConfirm">确定</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		apiGoodsLists,
		apiBrandLists
	} from '@/api/goods'
	import {
		apiSearchHistory,
		apiSearchHistoryClear
	} from '@/api/goods'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'

	export default {
		name: "Search",
		mixins: [MescrollMixin],

		data() {
			return {
				showScreen: false,
				goodsList: [], // 商品列表
				goodsSearchHistory: [], // 商品搜索记录
				goodsSearchHistoryLoading: true, // 搜索记录请求状态loading
				searchStatus: true, // 搜索状态
				goodsCardStyle: 'square', // 商品卡片样式: square -正方形; rectangle -长方形
				search: {
					name: '', // 商品名称
					category_id: '', // 分类
					price: '', // 价格排序: desc-降序; asc-升序;
					sale: '', // 销量排序: desc-降序; asc-升序;
					brand_id: '' //品牌
				},
				// 品牌列表
				brandLists: []
			}
		},

		methods: {
			// 初始化Mescroll
			mescrollInit(mescroll) {
                console.log(mescroll)
				this.mescroll = mescroll
			},

			// 下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll()
			},

			// 上拉加载更多
			upCallback(page) {
				if (this.searchStatus) return

				const pageNum = page.num
				const pageSize = page.size

				apiGoodsLists({
					...this.search,
					page_no: pageNum,
					page_size: pageSize,
				}).then(({
					lists,
					page_size,
					count,
				}) => {
					// 如果是第一页需手动置空列表
					if (page.num == 1) this.goodsList = []
					// 重置列表数据
					this.goodsList = [...this.goodsList, ...lists]
					// this.mescroll.endBySize(page_size, count)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(() => {
					this.mescroll.endErr()
				})
			},

			// 跳转商品详情
			goGoodsDetail(id) {
				this.$Router.push({
					path: '/pages/goods_detail/goods_detail',
					query: {
						id
					}
				})
			},

			// 聚焦搜索
			focusSearch() {
				this.searchStatus = true
				this.initSearchHistoryData()
			},

			// 搜索
			handleSearch(value) {
				this.searchStatus = false
				this.$set(this.search, 'name', value)
				this.mescroll && this.mescroll.resetUpScroll()
			},

			// 清空搜索记录
			onSearchHistoryClear() {
				uni.showModal({
					title: '温馨提示',
					content: '是否清空搜索记录?',
					confirmColor: this.themeColor,
					success: ({
						confirm
					}) => {
						if (!confirm) return
						apiSearchHistoryClear()
							.then(() => {
								this.initSearchHistoryData()
							})
							.catch(() => {
								this.$toast({
									title: '操作失败'
								})
							})
					}
				});
			},

			// 排序方式
			handSortOptions(type) {
				switch (type) {
					case 'all':
						this.$set(this.search, 'sale', '')
						this.$set(this.search, 'price', '')
						break
					case 'sale':
						this.$set(this.search, 'price', '')
						this.$set(this.search, 'sale', this.getSortReverse(this.search.sale))
						break
					case 'price':
						this.$set(this.search, 'sale', '')
						this.$set(this.search, 'price', this.getSortReverse(this.search.price))
						break
				}
				// 重载数据
				this.mescroll.resetUpScroll()
			},

			// 获取反向排序
			getSortReverse(sort) {
				switch (sort) {
					case 'asc':
						return 'desc'
					case 'desc':
						return 'asc'
					default:
						return 'desc'
				}
			},

			// 初始化搜索记录数据
			initSearchHistoryData() {
				apiSearchHistory().then(data => {
					this.goodsSearchHistory = data
				}).catch(err => {
					this.$toast({
						title: '搜索记录获取失败'
					})
					throw new Error(err)
				}).finally(() => {
					this.goodsSearchHistoryLoading = false
				})
			},
			//筛选条件
			getSearchList() {
				apiBrandLists({
					page_size: 999
				}).then(res => {
					this.brandLists = res.lists
				})
			},
			// 选中条件
			handleScreen(item) {
				this.search.brand_id = item.id
			},
			// 确定
			handleConfirm() {
				this.showScreen = false
				this.mescroll.resetUpScroll()
			},
			// 重置
			handleReset() {
				this.search.brand_id = ''
				this.showScreen = false
				this.mescroll.resetUpScroll()
			}
		},

		onLoad() {
			const options = this.$Route.query
			if (JSON.stringify(options) !== '{}') {
				!!options.id &&
					this.$set(this.search, 'category_id', options.id) &&
					this.handleSearch('')
				// !!options.name && this.handleSearch(options.name)
			}
			// 获取历史搜素内容
			this.initSearchHistoryData()
			this.getSearchList()
		}

	}
</script>

<style lang="scss" scoped>
	.search-container {
		display: flex;
		flex-direction: column;
	}

	.search-input {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;
		background-color: #FFFFFF;

		.search-action {
			width: 100rpx;
			text-align: center;
		}
	}

	.search-options-container {
		box-sizing: border-box;
		height: 100vh;
		padding: 0 20rpx;
		background-color: #FFFFFF;

		.search-options {
			&-header {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0 24rpx 0;
				font-size: $-font-size-nr;
			}

			&-main {
				display: flex;
				flex-wrap: wrap;
			}

			&-item {
				padding: 8rpx 24rpx;
				margin: 0 16rpx 24rpx 0;
				border-radius: 60px;
				background-color: #F4F4F4;
			}
		}
	}

	.sort {
		display: flex;
		align-items: center;
		height: 80rpx;
		font-size: $-font-size-nr;
		background-color: #FFFFFF;

		&-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&-item--active {
			@include font_color()
		}

		&-style {
			position: relative;
			width: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			&::before {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				display: block;
				content: "";
				height: 1em;
				border-left: $-solid-border;
			}
		}
	}


	.goods-container {
		flex: 1;
		display: flex;
		padding: 0 20rpx;

		&-square {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		&-rectangle {
			flex-direction: column;
		}

		.goods-item {
			margin-top: 16rpx;
		}
	}

	.screen-popup {
		.screen-content {
			height: calc(100% - 100rpx - env(safe-area-inset-bottom));

			.screen-item {
				padding: 20rpx;
			}

			.brand-list {
				border-radius: 10rpx;

				.brand-item {
					width: 190rpx;
					padding: 0 20rpx;
					border: 1px solid transparent;
					background-color: #F5F5F5;
					line-height: 60rpx;
					border-radius: 60rpx;
					text-align: center;
					&.active {
						@include border_color();
						@include background_color(0.3);
						@include font_color();
					}
					&:not(:nth-of-type(3n)) {
						margin-right: 20rpx;
					}
				}
			}
		}

		.screen-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);

			.btn {
				flex: 1;
				border-radius: 60rpx;

				&--reset {
					@include font_color() border: 1px solid currentColor;
					margin-right: 20rpx;
				}

				&--confirm {
					@include background_color();
					color: #fff;
				}
			}
		}
	}
</style>
